<template>
	<view class="intro-body">
		<view class="section-title">
			<text>店铺简介</text>
		</view>
		<view class="noData" v-if="!introData && !businessLicense">
			暂无商家介绍信息
		</view>
		<view class="intro-content">
			<view :class="['intro-text', {'expanded': isExpanded}]" id="intro-text">
				{{introData.introduction || ''}}</view>
			<view class="expand-btn" v-if="hasOverflow" @tap="toggleExpand">
				{{isExpanded ? '收起' : '展开全部'}}
			</view>
			<!-- <view>{{detail.Introduction || '暂无商家介绍信息'}}</view> -->
		</view>
		<view class="intro-box">
			<view class="intro-box-item" v-if="introData && introData.tags&&introData.tags.length > 0">
				<view class="tags-list">
					<view class="tags-item restaurant" v-for="(item,index) in introData.tags" :key="index">
						{{item}}
					</view>
				</view>
			</view>
			<view class="intro-box-item"
				v-if="introData && introData.serviceProcess&& introData.serviceProcess.length > 0">
				<view class="item-title">
					服务流程
				</view>
				<view class="process-box">
					<view class="process-item" v-for="(item,index) in introData.serviceProcess" :key="index">
						<view class="process-item-num">
							{{item.index}}
						</view>
						<view class="process-item-info">
							<view class="process-item-info-name">
								{{item.title}}
							</view>
							<view class="process-item-info-desc">
								{{item.description}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="introData && introData.otherNotes&&introData.otherNotes.length > 0">
				<view class="item-title">
					其他说明
				</view>
				<view class="others-box">
					<view class="others-item" v-for="(item,index) in introData.otherNotes" :key="index">
						<uni-icons type="checkbox-filled" color="#2563EB" size="26"></uni-icons>
						<view class="others-item-value">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="intro-box-item"
				v-if="introData &&introData.workImageList&& introData.workImageList.length > 0">
				<view class="item-title">
					作品展示
				</view>
				<view :class="['img-list',{'flex':introData.worksImagesColumn != 1}]">
					<view class="img-item works" v-for="(item,index) in introData.workImageList" :key="index">
						<image class="img-item-url" :src="item"
							:mode="introData.worksImagesColumn == 1 ? 'widthFix' : 'aspectFill'"></image>
					</view>
				</view>
			</view>


		</view>
		<view class="businessLicense" v-if="businessLicense" @click="goBusinessLicense">
			商家资质
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isExpanded: false,
				hasOverflow: false
			}
		},
		props: ['introData', 'businessLicense'],
		mounted() {
			setTimeout(() => {
				console.log("introData =>", introData);
			}, 1000)
		},
		methods: {
			goBusinessLicense() {
				uni.navigateTo({
					url: "/mall_subpages/merchants/businessLicense?businessLicense=" + this.businessLicense
				})
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
			checkOverflow() {
				// 使用uni-app的API获取元素高度
				const query = uni.createSelectorQuery().in(this);
				query.select('#intro-text').boundingClientRect(data => {
					if (data) {
						// 如果内容高度大于5行的高度（假设每行20px），则显示展开按钮
						this.hasOverflow = data.height > 100;
					}
				}).exec();
			}
		},
		mounted() {
			this.checkOverflow();
		},
		watch: {
			introData: {
				handler() {
					this.$nextTick(() => {
						this.checkOverflow();
					});
				},
				deep: true
			}
		}
	}
</script>

<style lang="less">
	@import './intro.less';

	.intro-content {
		.intro-text {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1.5;

			&.expanded {
				-webkit-line-clamp: unset;
			}
		}

		.expand-btn {
			color: #007AFF;
			font-size: 28rpx;
			// margin-top: 20rpx;
			text-align: left;
			padding: 10rpx 0;
		}
	}
</style>